import React, { useState } from 'react'
import { Select, Space,Radio,Input,Button,Table  } from 'antd';
import './kj.css'

// select选择器
const handleChange = (value) => {
  console.log(`selected ${value}`);
};
const dataSource = [
  {
    key: '1',
    name: '303',
    lou: '国贸一期B座',
    floor: '3层',
    area:'300.02',
    fitment:'精装',
    direction:'东',
    status:'上架中',
    actions:<div><img src={require("../../../static/images/编辑按钮.png")} style={{width:'14.2px',height:'14.2px',}} alt="" /><img src={require("../../../static/images/删除按钮.png")} style={{width:'14.2px',height:'14.2px'}} alt="" /></div>
  },
  {
    key: '1',
    name: '303',
    lou: '国贸一期B座',
    floor: '3层',
    area:'300.02',
    fitment:'精装',
    direction:'东',
    status:'上架中',
    actions:<div><img src={require("../../../static/images/编辑按钮.png")} style={{width:'14.2px',height:'14.2px',}} alt="" /><img src={require("../../../static/images/删除按钮.png")} style={{width:'14.2px',height:'14.2px'}} alt="" /></div>
  },
  {
    key: '1',
    name: '303',
    lou: '国贸一期B座',
    floor: '3层',
    area:'300.02',
    fitment:'精装',
    direction:'东',
    status:'上架中',
    actions:<div><img src={require("../../../static/images/编辑按钮.png")} style={{width:'14.2px',height:'14.2px',}} alt="" /><img src={require("../../../static/images/删除按钮.png")} style={{width:'14.2px',height:'14.2px'}} alt="" /></div>
  },
  {
    key: '1',
    name: '303',
    lou: '国贸一期B座',
    floor: '3层',
    area:'300.02',
    fitment:'精装',
    direction:'东',
    status:'上架中',
    actions:<div><img src={require("../../../static/images/编辑按钮.png")} style={{width:'14.2px',height:'14.2px',}} alt="" /><img src={require("../../../static/images/删除按钮.png")} style={{width:'14.2px',height:'14.2px'}} alt="" /></div>
  },
  {
    key: '1',
    name: '303',
    lou: '国贸一期B座',
    floor: '3层',
    area:'300.02',
    fitment:'精装',
    direction:'东',
    status:'上架中',
    actions:<div><img src={require("../../../static/images/编辑按钮.png")} style={{width:'14.2px',height:'14.2px',}} alt="" /><img src={require("../../../static/images/删除按钮.png")} style={{width:'14.2px',height:'14.2px'}} alt="" /></div>
  },
];

const columns = [
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
    className:'name'
  },
  {
    title: '楼宇',
    dataIndex: 'lou',
    key: 'lou',
  },
  {
    title: '楼层',
    dataIndex: 'floor',
    key: 'floor',
  },
  {
    title:'面积m²',
    dataIndex: 'area',
    key: 'area',
  },
  {
    title:'装修',
    dataIndex: 'fitment',
    key: 'fitment',
  },
  {
    title:'朝向',
    dataIndex: 'direction',
    key: 'direction',
  },
  {
    title:'状态',
    dataIndex: 'status',
    key: 'status',
  },
  {
    title:'操作',
    dataIndex: 'actions',
    key: 'actions',
  }
];
export default function KJ() {
  // 单选框
  const [value, setValue] = useState(1);
  const [value1, setValue1] = useState(1);
  const [value2, setValue2] = useState(1);
  // 状态
  const onChange = (e) => {
    console.log('radio checked', e.target.value);
    setValue(e.target.value);
  };
  // 装修
  const onChange1 = (e) => {
    console.log('radio checked', e.target.value);
    setValue1(e.target.value);
  };
  // 朝向
  const onChange2 = (e) => {
    console.log('radio checked', e.target.value);
    setValue2(e.target.value);
  };

  return (
    <>
      <div>
        <button className='btn'>新建空间</button>
        <div className='msg'>
          {/* 选择器 */}
          <div className='sel'>
            <Space wrap>
              <Select
                defaultValue="请选择楼宇"
                style={{
                  width: 210,
                  backgroundColor: '#F8FBFF',
                  borderColor:'#E1E8EE',
                  borderRadius:2
                }}
                onChange={handleChange}
                options={[
                  {
                    value: 'jack',
                    label: 'Jack',
                  },
                  {
                    value: 'lucy',
                    label: 'Lucy',
                  },
                  {
                    value: 'Yiminghe',
                    label: 'yiminghe',
                  },
                  {
                    value: 'disabled',
                    label: 'Disabled',
                    disabled: true,
                  },
                ]}
              />
              <Select
                defaultValue="请选择楼层"
                style={{
                  width: 120,
                  backgroundColor: '#F8FBFF',
                  borderColor:'#E1E8EE',
                  borderRadius:2
                }}
                options={[
                  {
                    value: 'lucy',
                    label: 'Lucy',
                  },
                ]}
              />
              <Select
                defaultValue="请输入空间名称"
                style={{
                  width: 299,
                  backgroundColor: '#F8FBFF',
                  borderColor:'#E1E8EE',
                  borderRadius:2
                }}
                options={[
                  {
                    value: 'lucy',
                    label: 'Lucy',
                  },
                ]}
              />
            </Space>
          </div>
          {/* 状态 */}
          <div>
            <span>状态</span>
            <Radio.Group onChange={onChange} value={value}>
              <Radio value={1}>上架中</Radio>
              <Radio value={2}>已上架</Radio>
            </Radio.Group>
          </div>
          {/* 面积 */}
          <div>
            <span>面积</span>
            <Space>
              <Input />
              <span>m² ~</span>
              <Input />
            </Space>
          </div>
          {/* 装修 */}
          <div>
            <span>装修</span>
            <Radio.Group onChange={onChange1} value={value1}>
              <Radio value={1}>毛胚</Radio>
              <Radio value={2}>简装</Radio>
              <Radio value={3}>精装</Radio>
            </Radio.Group>
          </div>
          {/* 朝向 */}
          <div>
            <span>朝向</span>
            <Radio.Group onChange={onChange2} value={value2}>
              <Radio value={1}>东</Radio>
              <Radio value={2}>南</Radio>
              <Radio value={3}>西</Radio>
              <Radio value={4}>北</Radio>
              <Radio value={5}>东南</Radio>
              <Radio value={6}>西南</Radio>
              <Radio value={7}>东北</Radio>
              <Radio value={8}>西北</Radio>
            </Radio.Group>
          </div>
          {/* 按钮 */}
          <div className='edit'>
              <div>
                <Button className='btn2'>查询</Button>
                <Button className='btn3'>重置</Button>
              </div>
          </div>
        </div>
        <div className='table0'>
          <Table style={{width:'100%',paddingLeft:'20px'}} dataSource={dataSource} columns={columns} />;
        </div>
      </div>
    </>
  )
}
